<template>
    <div style="color: #666;font-size: 14px;">
        <div style="text-align: center;margin-top: -10px">
            <h1 style="color: #ffc440;font-size:30px">{{ title }}</h1>
            <!--<el-button @click="send" type="primary">发送请求</el-button>-->
        </div>

        <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="item in poster" :key="item.id">
                <img :src="item.images" alt="" style="width: 100%"/>
            </el-carousel-item>
        </el-carousel>

        <el-card style="margin: 10px 0">
            <div style="padding-bottom: 20px; font-size: 24px;color: mediumvioletred;">
                <i class="el-icon-message-solid"></i>
                NBA 工 会 公 告
            </div>
            <el-collapse accordion v-for="(item, index) in noticeRich" :key="item.id">
                <el-collapse-item :name="index + ''">
                    <template slot="title">
                        <span><a style="font-size: 20px; color: #E6A23C" @click="view(item.content)">{{ item.name }}</a></span><i
                            style="color: #E6A23C"
                            class="header-icon el-icon-info"></i>
                        <span style="margin-left: 20px">{{ item.time }}</span>

                        <span style="margin-left: 20px">发布人：{{ item.user }}</span>

                    </template>
                    <div>
                        <div style="padding: 10px 0">

                            <el-image :src="item.img" v-if="item.img!=''" @click="preview(index)">

                            </el-image>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-dialog title="公告内容" :visible.sync="dialogFormVisible1" width="60%" :close-on-click-modal="false">
            <el-card>
                <div v-html="content"></div>
            </el-card>
        </el-dialog>

    </div>
</template>

<script>
    import request from '../utils/request'

    let results;
    export default {
        name: "Home",

        data() {
            return {
                dialogFormVisible1: false,
                poster: [],
                activeNames: ['0'],
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                notice: [],
                noticeRich: [],
                title: '',
                photoListSrc: [],
                content: '',
                standingGroups: [],
                form: []

            }
        },
        created() {
            request.get("/poster/selectIsEnablePoster").then(res => {
                this.poster = res.data
                this.title = res.data[0].comment
                this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
            })
            this.request.get("/notice/type/2").then(res => {
                // this.noticeRich = res.data.splice(0, 5)
                this.noticeRich = res.data
            })

        },
        methods: {

            //发送数据
            send: function () {
                request.get("/team/pachou").then(res => {
                    console.log(res)
                    this.standingGroups = res.payload.players
                    console.log(this.standingGroups)

                    request.post("/player/addBatch3",this.standingGroups).then(res => {
                        console.log(res)
                    })


                   // 球队接口
                   /* this.standingGroups = res.payload.standingGroups[1].teams
                    console.log(this.standingGroups)
                    // JSON.stringify(this.standingGroups)

                 /!*   this.standingGroups.forEach(e=>{
                        JSON.stringify(this.standingGroups)
                        console.log(JSON.stringify(this.standingGroups));
                    })*!/

                    request.post("/team/addBatch",this.standingGroups).then(res => {
                        console.log(res)
                    })*/

                })


            },
            view(content) {
                this.content = content
                this.dialogFormVisible1 = true

            },

            preview(index) {
                this.request.get("/notice/type/2").then(res => {


                    for (var i = 0; i < res.data.length; i++) {
                        if (i === index) {
                            this.photoListSrc.push(res.data[i].img);
                        }
                    }


                })


                this.$imagePreview({
                    images: this.photoListSrc,
                    index: index
                });
            },
        }
    }
</script>
<style scoped>
    .el-icon-message-solid {
        -webkit-animation-name: imageAnim;
        -webkit-animation-duration: 0.6s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease;
        -webkit-animation-play-state: running;
        animation-iteration-count: infinite;
        color: cadetblue;
        content: "\e799";
    }

    @-webkit-keyframes imageAnim {

        100% {
            color: #f4443c
        }
    }

    .el-icon-message-solid {
        -webkit-animation-name: imageAnim;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease;
        -webkit-animation-play-state: running;
        animation-iteration-count: infinite;
        color: #f4443c;
        content: "\e799";
    }

    @-webkit-keyframes imageAnim {

        100% {
            transform: scale(0.9)
        }
    }
</style>

